<template>
  <div class="tchangepassword">
    <V-Header></V-Header>
    <el-row class="headline">
      <el-button class="headlinebtn xy-middle" icon="el-icon-edit">修改密码</el-button>
    </el-row>
    <el-row  class="mainconter hidden-xs-only">
      <el-form label-width="120px" :model="formLabelAlign">
        <el-form-item label="旧密码">
          <el-input class="input" v-model="formLabelAlign.oldpassword" placeholder="请输入旧密码" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input class="input" v-model="formLabelAlign.newpassword" placeholder="请输入6-16位密码" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input class="input" v-model="formLabelAlign.tpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
        </el-form-item>
      </el-form>
       <el-row class="btnConter">
          <el-button class="ttijiao" type="primary" @click="rpass">保存</el-button>
          <el-button class="ttijiao" type="primary" @click="historyBack">返回</el-button>
      </el-row>
    </el-row >
    <el-row  class="mainconter1 hidden-sm-and-up">
      <el-form label-width="2rem" :model="formLabelAlign">
        <el-form-item label="旧密码:">
          <el-input class="input" v-model="formLabelAlign.oldpassword" placeholder="请输入旧密码" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input class="input" v-model="formLabelAlign.newpassword" placeholder="请输入6-16位密码" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码:">
          <el-input class="input" v-model="formLabelAlign.tpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
        </el-form-item>
      </el-form>
      <el-row class="btnConter x-middle">
          <el-button class="ttijiao" type="primary" @click="rpass">保存</el-button>
          <el-button class="ttijiao" type="primary" @click="historyBack">返回</el-button>
      </el-row>
    </el-row >
  </div>
</template>

<script>
import VHeader from "@/components/Header";
export default {
  name: "teacher",
  components: {
    VHeader
  },
  data() {
    return {
      formLabelAlign: {
        oldpassword: "",
        newpassword: "",
        tpassword: ""
      }
    };
  },
  methods: {
      // 返回上一页
    historyBack(){
      history.go(-1)
    },
    rpass() {
      if(!this.formLabelAlign.oldpassword){
        this.$message({
          offset: "400",
          message: "请输入旧密码",
          showClose: true
        });
        return false;
      }
      if(!this.formLabelAlign.newpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.formLabelAlign.newpassword.length<6){
        this.$message({
          offset: "400",
          message: "请输入大于6位的密码",
          showClose: true
        });
        return false;
      }
      if(!this.formLabelAlign.tpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.formLabelAlign.tpassword.length<6){
        this.$message({
          offset: "400",
          message: "请输入大于6位的密码",
          showClose: true
        });
        return false;
      }
      if (this.formLabelAlign.newpassword != this.formLabelAlign.tpassword) {
        this.$message({
          offset: "400",
          message: "两次密码不一致",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/student/rpass", {
          password: this.formLabelAlign.oldpassword,
          repass: this.formLabelAlign.newpassword,
          repass_confirmation: this.formLabelAlign.tpassword
        })
        .then(res => {
          if (res.data.code == 1) {
            localStorage.setItem("FL_TOKEN", res.data.data.api_token);
            this.$message({
              offset: "400",
              message: "修改成功",
              showClose: true
            });
            this.$router.push({ name: "Student" });
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    }
  }
};
</script>
<style lang="less">
.tchangepassword {
  .headline {
    height: 1.4rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.11);
    position: relative;
    .headlinebtn {
      letter-spacing: 5px;
      width: 2.81rem;
      height: 0.64rem;
      background: rgba(38, 49, 115, 1) !important;
      border-radius: 32px;
      font-size: 0.22rem;
      color: rgba(255, 255, 255, 1);
    }
  }
  .mainconter {
    position: relative;
    width: 1083px;
    height: 594px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    margin: 91px auto;
    box-sizing: border-box;
    padding: 97px 225px 0 225px;
    label {
      line-height: 60px;
      font-size: 20px;
    }
    input {
      font-size: 20px;
      margin-left: 80px;
      width: 435px;
      height: 60px;
      background: rgba(246, 246, 246, 1);
      margin-bottom: 35px;
      border: none;
    }
    .btnbox {
      display: flex;
      justify-content: space-between;
    }
    .fanhui {
      margin-top: 46px;
      width: 174px;
      height: 60px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(51, 51, 51, 1);
      border-radius: 30px;
      font-size: 22px;
    }
    .ttijiao {
      margin-top: 46px;
      // box-shadow: 0 0 5px rgba(66, 177, 226, 1);
      width: 174px;
      height: 60px;
      background: rgba(38, 49, 115, 1) !important;
      border-radius: 50px;
      font-size: 22px;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    }
    .btnConter{
      width: 100%;
      position: absolute;
      left: 0;
    }
  }
  .mainconter1{
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.2rem;
    .btnbox {
      display: flex;
      justify-content: space-around;
    }
    .fanhui {
      margin-top: 0.46rem;
      width: 1.74rem;
      height: 0.66rem;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(51, 51, 51, 1);
      border-radius: 30px;
      font-size: 0.22rem;
    }
    .ttijiao {
      margin-top: 0.46rem;
      // box-shadow: 0 0 5px rgba(66, 177, 226, 1);
      width: 1.74rem;
      height: 0.66rem;
      background: rgba(38, 49, 115, 1) !important;
      border-radius: 50px;
      font-size: 0.22rem;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    }
  }
  .btnConter{
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
.el-message-box .el-message-box__btns .el-button--primary{
  background: rgba(38, 49, 115, 1) !important;
}
</style>